<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的徽章</title>
    <!-- 重置样式 -->
    <link rel="stylesheet" href="../../../assets/css/normalize.css">
    <!-- 重置样式基础上补充的其他重置样式 -->
    <link rel="stylesheet" href="../../../assets/css/reset.css">
    <!-- 面向属性的样式 -->
    <link rel="stylesheet" href="../../../assets/css/property.css">
    <!-- 公共样式 -->
    <link rel="stylesheet" href="../../../assets/css/basic.css">
    <!-- 字体样式 -->
    <link rel="stylesheet" href="../../../icons/iconfont.css">
    <!-- 当前样式 -->
    <link rel="stylesheet" href="./myBadge.css">
</head>
<body>
     <!-- 头部 -->
     <header>
        <span class="iconfont icon-xiangzuo"></span>
        <div class="headBottom dpflex">
            <span class="iconfont icon-xunzhang"></span>
            <div class="bottomLeft">
                <p>我的徽章</p>
                <span>MY BADGES</span>
            </div>
            <div class="bottomRight">
                <p class="ranking">今日排名</p>
                <p class="number">9</p>
            </div>
        </div>
    </header>
    <!-- 徽章 -->
    <ul class="dpflex">
      <!--  <li>
            <img src="../../../assets/imgs/mybadge01.jpg" alt="">
            <p>连续训练天数</p>
        </li>
        -->
    </ul>


    <script src="./myBadge.js"></script>
    
</body>
</html>